<template>
    <div class='h-100' ref='page'>
        <div class='top-header' ref='header'>
            <top-header :agent-count='agentCount' :store-count='storeCount' :site-count='siteCount'></top-header>
            <section id='yunying-time'>
                <div>
                    <title-body>
                        <span slot='title' class='title'><transparent>占</transparent>运营时间</span>
                        <div v-size.marginLeft='20'>
                            <datetime-count v-model='yunyingTime' d h m></datetime-count>
                        </div>
                    </title-body>
                </div>
                <div v-size.marginTop='20'>
                    <title-body>
                        <span slot='title' class='title'>总充电时间</span>
                        <div v-size.marginLeft='20'>
                            <datetime-count v-model='totalChargeTime' d h></datetime-count>
                        </div>
                    </title-body>
                </div>
            </section>
        </div>

        <section ref='container' style='position:fixed;width:100%;height:100%;left:0;top:0'>
            <div class='h-100 relative'>
                <div id='map-container'>
                    <map-chart v-if='completePaddintTop' @mouseover='mouseoverMap' v-model='mapData'></map-chart>
                </div>

                <aside class='left-part'>
                    <section class='user-section'>
                        <title-body>
                            <span slot='title' v-size.fontSize='20'>今日注册：</span>
                            <div class='m-l-10'>
                                <num-count v-model='todayRegisterUserCount'></num-count>
                            </div>
                        </title-body>
                        <div id='user-part' class='m-t-15'>
                            <glass-box link='/user'>
                                <div slot='title' class='color-f5f5f5'>总用户：<countTo :endVal='totalUserCount'></countTo></div>

                                <div v-size.marginTop='40'>
                                    <div class='color-fff f-20' v-size.paddingLeft='15'>近7日用户注册</div>
                                    <div class='left-part-chart m-t-20'>
                                        <line-chart v-model='latelyRegisterData'></line-chart>
                                    </div>
                                </div>

                            </glass-box>
                        </div>
                    </section>

                    <section class='order-section'>
                        <title-body>
                            <span slot='title' v-size.fontSize='20'>今日订单：</span>
                            <div class='m-l-10'>
                                <num-count v-model='todayOrderCount'></num-count>
                            </div>
                        </title-body>
                        <div id='user-part' class='m-t-15'>
                            <glass-box link='/order'>
                                <div slot='title' class='color-f5f5f5'>总订单：<countTo :endVal='totalOrderCount'></countTo></div>

                                <div v-size.marginTop='40'>
                                    <div class='color-fff f-20' v-size.paddingLeft='15'>近7日订单</div>
                                    <div class='left-part-chart m-t-20'>
                                        <bar-chart v-model='latelyOrderData'></bar-chart>
                                    </div>
                                </div>

                            </glass-box>
                        </div>
                    </section>
                </aside>

                <aside class='right-part'>
                    <div id='device-part'>
                        <glass-box link='/device'>
                            <div slot='title' class='color-f5f5f5'>设备数：<countTo :endVal='deviceTotalCount'></countTo></div>

                            <div v-size.marginTop='30' id='device-count-chart'>
                                <device-pie-chart v-model='deviceCategoryData'></device-pie-chart>
                            </div>

                            <div v-size.marginTop='30'>
                                <div v-size.paddingLeft='20'>
                                    <arrow-title><span slot='title'>设备在线率</span></arrow-title>
                                </div>

                                <div v-size.marginTop='15' id='device-online-rate-chart'>
                                    <device-online-rate-chart v-model='deviceOnlineRateData'></device-online-rate-chart>
                                </div>
                            </div>

                            <div v-size.marginTop='30'>
                                <div v-size.paddingLeft='20'>
                                    <arrow-title><span slot='title'>设备使用率</span></arrow-title>
                                </div>

                                <div class='m-t-20'>
                                    <div id='device-availability-rate-chart'>
                                        <device-availability-rate-chart v-model='deviceUseRateData'></device-availability-rate-chart>
                                    </div>
                                </div>
                            </div>

                        </glass-box>
                    </div>
                </aside>
            </div>
        </section>
        
        <div class='agent-store-modal' v-if='showAgentModal' ref='agentModal' :style='{left : agentModalLeft + "px", top : agentModalTop + "px"}'>
            <agent-modal v-model='currentAgentId'></agent-modal>
        </div>
        
        <div class='agent-store-modal' v-if='showStoreModal' ref='agentModal' :style='{left : agentModalLeft + "px", top : agentModalTop + "px"}'>
            <store-modal v-model='currentStoreId'></store-modal>
        </div>

        <div class='agent-store-modal' v-if='showSiteModal' ref='agentModal' :style='{left : agentModalLeft + "px", top : agentModalTop + "px"}'>
            <site-modal isAgent v-model='currentSiteId'></site-modal>
        </div>

    </div>
</template>

<script src='./index.js'></script>

<style scoped lang='scss' src='./index.scss'></style>